<template>
	<view class="padd">
		<template v-if="fromPage == 'illegalReport'">
			<view class="feedTit"><text class="must">*</text>被举报人:<text style="color: red;">{{jbUserName}}</text></view>
		</template> 
		<view class="feedTit"><text class="must">*</text>{{typeTxt}}<text class="lenTxt">(200字以内)</text></view>
		<textarea class="areaTxt" v-model="txtContent" :placeholder="placeHolder" maxlength="200"></textarea>
		<template v-if="fbId == ''">
			<view class="feedTit">联系方式</view>
			<input class="lxMobile" v-model="lxMobile" type="tel" placeholder="请输入您的联系方式" maxlength="11"/>
			<view class="uni-uploader-title">注:添加联系方式方便客服及时联系到您</view>
		</template>
		<view class="feedImgList">
			<view class="uni-uploader-body">
				<view class="uni-uploader__files">
					<block v-for="(image,index) in albumList" :key="index">
						<view class="uni-uploader__file">
							<view class="iconfont icon-guanbi" @tap="delect(index)"></view>
							<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
						</view>
					</block>
					<view class="uni-uploader__input-box" v-show="hasFullFlag">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
			<view class="uni-uploader-head">
				<view class="uni-uploader-title">注:最多上传6张图片<text>({{albumList.length}}/6)</text></view>
			</view>
			<button class="comBtn" :disabled="btnDisabFlag" @tap="save">{{btnTit}}</button>
		</view>
	</view>
</template>

<script>
	var sourceType = [
		['album'],
		['camera'],
		['album', 'camera']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	import { addFeedBack } from '@/api/mine/index'
	export default {
		data(){
			return{
				hasFullFlag : true,
				albumList : [],
				upSuccImgArr : [],
				count: [1, 2, 3, 4, 5,6],
				sourceTypeIndex: 2,
				sizeTypeIndex: 1,
				countIndex: 5,
				btnTit:'确认提交',
				btnDisabFlag:false,
				fromPage:'',
				typeTxt:'',
				txtContent:'',
				upMultiSucImgNum:0,
				pathName:'',
				type:-1,
				placeHolder:'',
				jbUserName:'',
				jbAcc:'',
				type:-1,
				fbId:'',
				lxMobile:''
			}
		},
		onLoad(options){
			//feedBack illegalReport 
			this.fromPage = options.fromPage;
			this.fbId = options.fbId;
			this.typeTxt = this.fromPage == 'feedBack' ? '请描述您的问题' : '请描述您要举报的违规问题';
			this.type = this.fromPage == 'feedBack' ? 1 : 2;
			this.pathName = this.fromPage == 'feedBack' ? 'user/feedBack' : 'user/jubao';
			this.placeHolder = this.fromPage == 'feedBack' ? '请输入您的反馈内容(200字以内)' : '请输入您的举报内容(200字以内)'
			var title = this.fromPage == 'feedBack' ? '添加反馈' : '添加违规举报';
			if(this.fromPage == 'illegalReport'){
				this.jbUserName = options.userName;
				this.jbAcc = options.jbAcc;
			}
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title:title
				})
			},300)
		},
		methods:{
			save(){
				if(this.txtContent == ''){
					this.util.showToast('请输入内容');
				}else{
					var zlImgStr = '';
					if(this.upSuccImgArr.length > 0){
						zlImgStr = this.upSuccImgArr.join(',');
					}
					var field = { type:this.type,content:this.txtContent,fbImg:zlImgStr,lxMobile:this.lxMobile,fbId:this.fbId };
					if(this.fromPage == 'illegalReport'){
						var tmpField = { bjbAccount:this.jbAcc,bjbRealName:this.jbUserName };
						Object.assign( field,tmpField );
					}
					uni.showLoading({ title: '保存中...', mask: true });
					this.btnDisabFlag = true;
					addFeedBack(field).then(res=>{
						this.util.showToast('提交成功,等待后台处理中...');
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500);
					}).catch(err=>{
						this.btnDisabFlag = false;
						console.log(err)
					});
				}
			},
			chooseImage(){
				if (this.albumList.length === 6) { return; }
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					//sizeType: sizeType[this.sizeTypeIndex],
					sizeType:'original',
					count: this.albumList.length + this.count[this.countIndex] > 6 ? 6 - this.albumList.length : this.count[this.countIndex],
					success: (res) => {
						this.btnDisabFlag = true;
						this.btnTit = '图片上传中...';
						this.albumList = this.albumList.concat(res.tempFilePaths);
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.Upload(res.tempFilePaths[i],res.tempFilePaths.length);
						}
						if(res.tempFilePaths.length == 6){
							this.hasFullFlag = false;
						}
					}
				})
			},
			// 上传多图
			Upload(filePath,hasSelLen){
				var field = {pathName:this.pathName,relativePathTag:1};
				const upload_task = uni.uploadFile({
				    url: this.serverUrl + '/cosFile/cosUpload', //需要用HTTPS，同时在微信公众平台后台添加服务器地址  
				    filePath: filePath, //上传的文件本地地址    
					header:{
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
				    name: 'file',
					formData:field,
				    //附近数据，这里为路径     
				    success: (res)=>{
						if(JSON.parse(res.data).code == 200){
							this.upMultiSucImgNum ++;
							// var filename = data.datas[0]; //存储地址 显示
							this.upSuccImgArr.push(JSON.parse(res.data).datas.filePath);
							if(this.upMultiSucImgNum == hasSelLen){
								this.upMultiSucImgNum = 0;
								this.btnDisabFlag = false;
								this.btnTit = '确认提交';
							}
						}else if(JSON.parse(res1.data).code == 1000){
							this.btnDisabFlag = false;
							this.btnTit = '确认提交';
							uni.showToast({
								title : '服务器错误',
								icon : 'none'
							});
						}
					}
				});
			},
			previewImage(e){
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.albumList
				})
			},
			delect(index){
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					confirmColor:'red',
					success: (res)=> {
						if (res.confirm) {
							this.albumList.splice(index,1);
							this.upSuccImgArr.splice(index,1);
							this.hasFullFlag = true;
							
						}
					}
				});
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import url("/static/css/common/uni.css");
	.must{
		color: $pss-color-red;
	}
	.comBtn{
		border-radius: 50rpx;
		margin: 100rpx auto 0;
	}
	.areaTxt,
	.lxMobile{
		width: 94%;
		background: $pss-bg-gray;
		font-size: $font-size30;
		color: $pss-text-color3;
		border-radius: 10rpx;
	}
	.areaTxt{
		padding: 3%; 
		height: 400rpx;
	}
	.lxMobile{
		height: 80rpx;
		padding:0 3%;
		margin-bottom: 10rpx;
	}
	.feedTit{
		height: 90rpx;
		line-height: 90rpx;
		font-size: $font-size32;
		color: $pss-text-color3;
		font-weight: bold;
		.lenTxt{
			font-weight: normal;
			font-size: $font-size26;
			margin-left: 10rpx;
		}
	}
	.cell-pd {
		padding: 22upx 30upx;
	}
	.uni-uploader__file{
		position: relative;
	}
	.list-pd {
		margin-top: 0rpx;
	}
	.icon-guanbi{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: 0;
		background: rgba(0,0,0,.6);
		color: #fff;
		z-index: 100;
		text-align: center;
		line-height: 50rpx;
		font-size: 50rpx;
	}
	.uni-uploader-title{
		font-size: $font-size26;
		color: $pss-color-red;
	}
</style>